<template>
    <div class="modal fade" id="batch_search" tabindex="-1" role="dialog"
         aria-labelledby="batch_search">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="batchsearch_box">
                        <div class="g-form-line">
                            <div class="batchsearch_left">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">
                                        <img src="../../assets/images/home_image/close.png" alt="" class="closeBtn">
                                    </span>
                                </button>
                                <p>批量搜索</p>
                            </div>
                            <div class="batchsearch_right">
                                <p class="text_1">设备IMEI号</p>
                                <textarea type="text" class="text_2" v-model="imeis"></textarea>
                                <p class="text_3">多个imei号以英文逗号分隔</p>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-success left_btn" @click="search">搜索</button>
                                    <button type="button" class="btn btn-success  right_btn export"
                                            data-dismiss="modal">
                                        取消
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                imeis: ''
            }
        },
        methods: {
            search () {
                if (this.imeis === '') {
                    this.$store.commit('showAlert', {error: this.$msgDictionary.imeiError.imeiEmpty})
                    return
                }
                let data = {
                    imeis: this.imeis
                }
                this.$ajax
                    .equip
                    .queryEquipByImeis(data)
                    .then(res => {
                        let data = res.data
                        if (data.code === 200) {
                            this.$emit('getData', data.result)
                            $('#batch_search').modal('hide')
                        } else if (data.code === 408) {
                            this.$store.commit('showAlert', {error: this.$msgDictionary.loginGetaway})
                            let timer = setTimeout(() => {
                                clearTimeout(timer)
                                $('#batch_search').modal('hide')
                                $('#msgModal').modal('hide')
                                this.$router.push({path: '/login'})
                            }, 2000)
                        } else {
                            this.$store.commit('showAlert', {error: data.msg})
                        }
                    }, () => {
                        this.$store.commit('showAlert', {error: this.$msgDictionary.serviceException})
                    })
            }
        }
    }
</script>

<style scoped>
    .g-form-line {
        float: left;
        padding: 0;
        width: 100%;
        height: 100%;
        overflow: scroll;
        overflow-x: hidden;
        overflow-y: hidden;
        text-align: center;
    }

    .modal-content {
        width: 530px;
        height: 362px;
        padding: 0;
        margin: 0;
    }

    .modal-body {
        width: 530px;
        height: 362px;
        padding: 0;
        margin: 0;
    }

    .batchsearch_box {
        width: 530px;
        height: 362px;
        padding: 0;
        margin: 0;
    }

    .batchsearch_left {
        position: relative;
        width: 180px;
        height: 362px;
        background: #263238;
        float: left;
        color: rgb(23, 210, 156);
        text-align: center;
        line-height: 362px;
    }

    .batchsearch_left p {
        font-size: 16px;
    }

    .closeBtn {
        position: absolute;
        left: 15px;
        top: 10px;
    }

    .batchsearch_right {
        position: relative;
        width: 350px;
        height: 362px;
        margin-left: 180px;
    }

    .batchsearch_right .text_1 {
        position: absolute;
        top: 20px;
        left: 40px;
        color: rgb(153, 153, 153);
    }

    .batchsearch_right .text_2 {
        position: absolute;
        top: 50px;
        left: 43px;
        width: 253px;
        height: 195px;
    }

    .batchsearch_right .text_3 {
        position: absolute;
        top: 254px;
        left: 43px;
        color: rgb(213, 76, 76);
    }

    .modal-footer {
        height: 362px;
        padding: 0;
        right: 0;
    }

    .modal-footer button:first-child {
        margin-left: 6px;
    }

    .left_btn {
        position: absolute;
        top: 300px;
        left: 40px;
    }

    .modal .modal-footer .btn-success.right_btn {
        position: absolute;
        top: 300px;
        left: 180px;
        margin-left: 13px;
    }
</style>
